<template>
  <div class="article-meta">
    <nuxt-link :to="{
      name: 'profile',
      params: {
        username: article.author.username
      }
    }">
      <img :src="article.author.image" />
    </nuxt-link>
    <div class="info">
      <nuxt-link class="author" :to="{
        name: 'profile',
        params: {
          username: article.author.username
        }
      }">
        {{ article.author.username }}
      </nuxt-link>
      <span class="date">{{ article.createdAt | date('MMM DD, YYYY') }}</span>
    </div>
    <button
      v-if="article.author.username !== user.username" @click="follow"
      class="btn btn-sm btn-outline-secondary"
      :class="{
        active: article.author.following
      }"
    >
      <i class="ion-plus-round"></i>
      &nbsp;
      {{article.author.following ? 'UnFollow' : 'Follow'}} {{article.author.username}}
    </button>
    <nuxt-link v-else class="btn btn-sm btn-outline-secondary" :to="{
      name: 'editor',
      params: {
        slug: article.slug
      }
    }"><i class="ion-edit"></i> Edit Article </nuxt-link>
    &nbsp;&nbsp;
    <el-button
      :loading="favoriteLoading"
      v-if="article.author.username !== user.username" @click="onFavorite"
      class="btn btn-sm btn-outline-primary"
      :class="{
        active: article.favorited
      }"
    >
      <i class="ion-heart"></i>
      &nbsp;
      {{article.favorited ? 'UnFavorite Article' : 'Favorite Article'}}<span class="counter">({{article.favoritesCount}})</span>
    </el-button>
    <el-popconfirm
      v-else
      title="确定删除该文章吗？"
      @onConfirm="deleteArticle"
    >
      <button slot="reference" class="btn btn-sm btn-outline-danger"><i class="ion-trash-a"></i> Delete Article </button>
    </el-popconfirm>
    
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { followUser, unFollowUser } from '@/api/profile'
import {
    addFavorite,
    deleteFavorite,
    deleteArticle
  } from '@/api/article'
export default {
  name: 'ArticleMeta',
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      favoriteLoading: false
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    async follow() {
        const { data } = this.article.author.following
        ? await unFollowUser(this.article.author.username) //取消关注
        : await followUser(this.article.author.username) //关注
        this.article.author.following = !this.article.author.following
    },
    async onFavorite () {
      this.favoriteLoading = true
        if (this.article.favorited) {
        // 取消点赞
        await deleteFavorite(this.article.slug)
        this.article.favorited = false
        this.article.favoritesCount += -1
        } else {
        // 添加点赞
        await addFavorite(this.article.slug)
        this.article.favorited = true
        this.article.favoritesCount += 1
        }
        this.favoriteLoading = false
    },
    deleteArticle() {
      deleteArticle(this.article.slug).then(res => {
        this.$router.push('/')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .btn-outline-primary {
    padding: .25rem .5rem;
    font-size: .875rem;
    color: #5cb85c;
    border-color: #5cb85c;
    background: none;
    line-height: 1.25;
  }
  .btn-outline-primary.active {
    background: #5cb85c;
    color: #fff;
  }
</style>
